<ion-header>

  <ion-navbar>
    <ion-title>{{'FEED_DETAIL.TITLE' | translate}}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="doSubmit()">
        <span ion-text color="primary">{{'FEED_DETAIL.SUBMIT_TEXT' | translate}}</span>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>{{'FEED_DETAIL.TIPS_TITLE' | translate}}</p>
  <ion-item>
    <ion-label>
      {{'FEED_DETAIL.FOOD_PROBLEM' | translate}}
    </ion-label>
    <ion-checkbox [checked]="product" (click)="selectValue('product')"></ion-checkbox>
  </ion-item>
  <ion-item>
    <ion-label>
      {{'FEED_DETAIL.HEALTH_PROBLEM' | translate}}
    </ion-label>
    <ion-checkbox [checked]="hygiene" (click)="selectValue('hygiene')"></ion-checkbox>
  </ion-item>
  <ion-item>
    <ion-label>
      {{'FEED_DETAIL.OTHERS_PROBLEM' | translate}}
    </ion-label>
    <ion-checkbox [checked]="others" (click)="selectValue('others')"></ion-checkbox>
  </ion-item>
  <ion-textarea [(ngModel)]="content" style="margin-top: 2vh; border: .5px #c8c7cc solid;height: 25vh;line-height: 4vh"  placeholder="{{'FEED_DETAIL.PLACEHOLDER' | translate}}">

  </ion-textarea>
  <div style="margin-top: 20px">
    {{'FEED_DETAIL.IMAGE_TIPS' | translate}}
  </div>
  <div *ngIf="fileList && fileList.length > 0 " class="img-container">
    <div class="img-detail" *ngFor="let item of fileList; index as i">
      <ion-icon (click)="deleteImg(i)" class="img-delete" name="ios-close-circle"></ion-icon>
      <img (click)="viewPhoto(i)" src="{{item}}" alt="">
    </div>
  </div>
  <button (click)="uploadImg()" style="margin: 5px;width: 20vw;height: 10vh;border: .5px #c8c7cc solid">
    <img style="width: 32px;height: 32px;margin-top: 5px" src="assets/imgs/plus.png" alt="">
    <p>
      {{'FEED_DETAIL.BTN_TEXT' | translate}}
    </p>
  </button>
</ion-content>
